<template>
	<view class="pages">
		<swiper v-if="infos.images?.length>0" class="swiper-box" autoplay indicator-dots>
			<swiper-item v-for="(item, index) in infos.images" :key="item._id">
				<view class="swiper-item">
					<image class="banner-image" :src="item.url" mode="aspectFill" :draggable="false" />
				</view>
			</swiper-item>
		</swiper>
		<image :src="infos?.avatar_file?.url || logo" mode="widthFix" class="banner-image" v-else></image>
		<view class="section">
			<view class="name">{{infos?.nickname}}</view>
			<view class="des">{{infos?.baseInfo?.mydes || '暂无介绍'}}</view>
		</view>

		<uni-section title="基本信息" type="line">
			<view class="base-box">
				<view class="info" v-if="infos?.baseInfo?.age">{{infos?.baseInfo?.age}}岁</view>
				<view class="info" v-if="infos?.baseInfo?.height">{{infos?.baseInfo?.height}}cm</view>
				<view class="info" v-if="infos?.baseInfo?.edu >0 || infos?.baseInfo?.edu===0 ">
					{{edu[infos?.baseInfo?.edu]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.mar >0  || infos?.baseInfo?.mar===0">
					{{mar[infos?.baseInfo?.mar]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.inCome >0 || infos?.baseInfo?.inCome===0">
					{{inCome[infos?.baseInfo?.inCome]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.house >0 || infos?.baseInfo?.house===0">
					{{house[infos?.baseInfo?.house]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.calling">{{infos?.baseInfo?.calling}}</view>
				<view class="info" v-if="city">{{city}}</view>
			</view>
		</uni-section>
		<uni-section title="详细信息" type="line">
			<view class="base-box">
				<view class="info" v-if="infos?.baseInfo?.nature >0 || infos?.baseInfo?.nature===0 ">
					性格：{{localNature[infos?.baseInfo?.nature]?.text}}
				</view>
				<view class="info" v-if="infos?.baseInfo?.btype >0 || infos?.baseInfo?.btype===0">
					血型：{{array[infos?.baseInfo?.btype]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.bearing >0 || infos?.baseInfo?.bearing===0">
					体态：{{localBearing[infos?.baseInfo?.bearing]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.zodiac >0 || infos?.baseInfo?.zodiac===0">
					属相：{{localZodiac[infos?.baseInfo?.zodiac]?.text}}
				</view>
				<view class="info" v-if="infos?.baseInfo?.parents >0 || infos?.baseInfo?.parents===0">
					婚后与父母同居：{{beforMar[infos?.baseInfo?.parents]?.text}}</view>
				<view class="info" v-if="infos?.baseInfo?.beforMar >0 || infos?.baseInfo?.beforMar===0">
					婚前同居：{{beforMar[infos?.baseInfo?.beforMar]?.text}}</view>
			</view>
		</uni-section>
		<!-- <uni-section title="自我介绍" type="line">
			<view class="base-box"> 
				<view class="info">{{infos?.baseInfo?.mydes || "无"}}</view>
			</view>
		</uni-section> -->
		<uni-section title="伴侣标准" type="line">
			<view class="base-box">
				<view class="info">地区：{{infos?.baseInfo?.city[infos.seach.zCity]?.text || '不限'}}</view>
				<view class="info">年龄：{{ages[infos?.seach?.zAge]?.text || '不限'}}</view>
				<view class="info">身高：{{pHeight[infos?.seach?.zHeight]?.text || '不限'}}</view>
				<view class="info">学历：{{edu[infos?.seach?.zEdu]?.text || '不限'}}</view>
				<view class="info">收入：{{inCome[infos?.seach?.zEdu]?.text || '不限'}}</view>
				<view class="info">婚史：{{mar[infos?.seach?.zMar]?.text || '不限'}}</view>
				<view class="info">房车：{{house[infos?.seach?.zHouse]?.text || '不限'}}</view>
				<view class="info">属相：{{localZodiac[infos?.seach?.zZodiac]?.text || '不限'}}</view>
				<view class="info">体态：{{localBearing[infos?.seach?.zBearing]?.text || '不限'}}</view>
				<view class="info">性格：{{localNature[infos?.seach?.zNature]?.text || '不限'}}</view>
			</view>
		</uni-section>
		<view style="height: 50px;"></view>
		<view class="bottom">
			<view class="bottom-left color">
				<uni-icons type="undo" color="#fff"></uni-icons>
				<button type="default" size="mini" class="color" open-type="share">分享朋友</button>
			</view>
			<view class="bottom-right color" v-if="isheart">
				<uni-icons type="heart-filled" :color="heart?'#ff0000':''"></uni-icons>
				<button type="default" size="mini" class="color" @click="heartClick">送上爱心</button>
			</view>
			<view class="bottom-right color" v-if="isheart">
				<uni-icons type="gift-filled" :color="gift?'#ff0000':''"></uni-icons>
				<button type="default" size="mini" class="color" @click="giftClick">送礼物</button>
			</view>
		</view>

		
		<!-- 送礼物组件 -->
		<wolf-to-gift ref="giftRef" :giftId='id'></wolf-to-gift>
		
		<!-- 生成分享图片 -->
		<!-- <canvas id="canvasQr" canvas-id="canvasQr" class="uqrcode-hide" style="width: 100px;height: 80px;"></canvas> -->

	</view>
</template>

<script>
	const db = uniCloud.database();
	import {
		useUserStore
	} from "@/pinia/user.js"
	import {
		mapState,
		mapActions
	} from "pinia"
	import logo from "@/static/logo.png"
	export default {
		data() {
			return {
				inviteCode: '', //推荐码
				logo,
				id: '',
				infos: {},
				array: [{
						value: 0,
						text: "A"
					}, {
						value: 1,
						text: "B"
					},
					{
						value: 2,
						text: "AB"
					},
					{
						value: 3,
						text: "O"
					}
				],
				beforMar: [{
						value: 0,
						text: "能"
					}, {
						value: 1,
						text: "不能"
					},
					{
						value: 2,
						text: "看情况"
					}
				],
			}
		},
		computed: {
			...mapState(useUserStore, ["sysSetting", 'userInfo', 'updateUserInfo', 'loveLine']),
			isheart() { //是否显示送上爱心
				return true
				return this.userInfo?.baseInfo?.mar > 0 || this.userInfo?.baseInfo?.mar === 0
			},
			heart() {
				console.log("loveLine==", this.loveLine.includes(this.infos._id));
				return this.loveLine.includes(this.infos._id)
			},
			gender() {
				return this.userInfo.gender || 0
			},
			ages() {
				return this.sysSetting.ages.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			pHeight() {
				return this.sysSetting.pHeight.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			edu() {
				return this.sysSetting.edu.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			inCome() {
				return this.sysSetting.inCome.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//婚史
			mar() {
				return this.sysSetting.mar.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//房车
			house() {
				return this.sysSetting.house.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//地区
			localCity() {
				let local = ["本省", "本市", "本县", "不限"]
				return local.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//属相  
			localZodiac() {
				let local = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
				return local.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//体态
			localBearing() {
				let local = ['偏瘦', '瘦', '微胖', '偏胖', '胖']
				return local.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			//性格
			localNature() {
				let local = ['外向', '内向', '中间']
				return local.map((item, index) => ({
					value: index,
					text: item
				}))
			},
			city() {
				let str = ""
				if (this.infos?.baseInfo?.city?.length > 0) {
					str = this.infos?.baseInfo?.city.map(item => item.text).join("-")
				}
				return str
			}
		},
		async onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.load() //加载客户信息
			}
			if (e.inviteCode) {
				this.inviteCode = e.inviteCode //推荐进来的存在
				this.loginBefore()
			}
			console.log("e=========>>>>", e);
		},
		methods: {
			...mapActions(useUserStore, ['getLoveLine']),
			giftClick(){//送礼物
				console.log("giftClick");
				this.$refs.giftRef.open()
			},
			async heartClick() { //表示喜欢，添加红心
				console.log("heartClick=======>", this.infos._id, this.userInfo._id);
				uni.showLoading({
					mask: true
				})
				if (this.heart) {
					let res = await db.collection('wolf-love-line').where(
						`hid=='${this.infos._id}' && uid=='${this.userInfo._id}'`).remove()
					console.log('res==>', res.result);
				} else {
					let obj = {
						uid: this.userInfo._id,
						hid: this.infos._id,
					}
					console.log(obj);
					await db.collection("wolf-love-line").add(obj)
				}
				await this.getLoveLine()
				uni.hideLoading()
			},
			async load() {
				let res = await db.collection("uni-id-users").doc(this.id).field(
					"_id,nickname,avatar_file,baseInfo,gender,images,seach").get()
				console.log("res", res.result.data);
				this.infos = Object.assign({}, res.result.data[0])
			},
			//自动登录，添加上下级关系
			loginBefore() {
				let _that = this
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: async res => {
						console.log("res", res)
						await _that.login({
							code: res.code,
							inviteCode: _that.inviteCode,
						})
					},
					fail: (err) => {
						console.log(err);
					},
					complete: () => {}
				});
			},
			async login(params) { //联网验证登录
				let _that = this
				const uniIdCo = uniCloud.importObject("uni-id-co", {
					customUI: true
				})
				uniIdCo.loginByWeixin(params)
					.then(result => {
						_that.loginSuccess({
							uniIdRedirectUrl: _that.uniIdRedirectUrl,
							autoBack: false
						})
					})
					.catch(e => {

					})
					.finally(e => {

					})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = `/pages/list/userInfo?inviteCode=${this.userInfo.my_invite_code}&id=${this.id}`
			return {
				title: '随手做好事,我给你介绍了以为合适的对象,快来看看吧',
				path,
				imageUrl: this.infos?.avatar_file?.url
			}
		}
		// #ifndef APP-NVUE
		// onPullDownRefresh() {
		// 	this.refresh()
		// },
		// onReachBottom() {
		// 	this.loadMore()
		// }
		// #endif
	}
</script>

<style scoped>
	.swiper-box{
		height: 700rpx;
	}

	.swiper-item {
		display: block;
		height: 700rpx;
		line-height: 700rpx;
		text-align: center;
	}

	.banner-image {
		width: 750rpx;
		height: 700rpx;
	}

	/* .item{
		margin: 5px;
		padding: 3px 10px;
	} */
	.heart {
		display: flex;
		justify-content: space-between;
		padding: 2px 10px;
	}

	.base-box {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 10px;
	}

	.info {
		padding: 3px 10px;
		margin: 10px;
		border-radius: 30px;
		background-color: #e5e5e5;
	}

	.section {
		padding: 10px 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin-top: -10px;
		background-color: #fff;
		position: relative;
	}

	.name {
		font-size: 24px;
		font-weight: 700;
	}

	.des {
		font-size: 12px;
		color: #7c7c7c;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 45px;
	}

	.bottom,
	.bottom-left,
	.bottom-right {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		justify-content: space-around;
	}

	.bottom-left,
	.bottom-right {
		margin: 5px;
		padding: 5px 15px;
		border-radius: 40px;
	}

	.color {
		color: #ffffff;
		background-color: #c33864;
		border-color: #c33864;
	}

	button {
		padding: 0 5px;
	}

	button::after {
		border: none;
	}


	.uqrcode-hide {
		position: fixed;
		left: 7500rpx;
	}
</style>